<form #systemConfigFrom="ngForm" class="compact">
    <section class="form-block">
        <label class="subtitle" *ngIf="showSubTitle">{{'CONFIG.SYSTEM' | translate}}</label>
        <div class="form-group">
            <label for="proCreation">{{'CONFIG.PRO_CREATION_RESTRICTION' | translate}}</label>
            <div class="select">
                <select id="proCreation" name="proCreation" [(ngModel)]="systemSettings.project_creation_restriction.value"
                    [disabled]="disabled(systemSettings.project_creation_restriction)">
                    <option value="everyone">{{'CONFIG.PRO_CREATION_EVERYONE' | translate }}</option>
                    <option value="adminonly">{{'CONFIG.PRO_CREATION_ADMIN' | translate }}</option>
                </select>
            </div>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.PRO_CREATION_RESTRICTION' | translate}}</span>
            </a>
        </div>
        <div class="form-group">
            <label for="tokenExpiration" class="required">{{'CONFIG.TOKEN_EXPIRATION' | translate}}</label>
            <label for="tokenExpiration" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="tokenExpirationInput.invalid && (tokenExpirationInput.dirty || tokenExpirationInput.touched)">
                <input name="tokenExpiration" type="text" #tokenExpirationInput="ngModel" [(ngModel)]="systemSettings.token_expiration.value"
                    required pattern="^[1-9]{1}[0-9]*$" id="tokenExpiration" size="20" [disabled]="!editable">
                <span class="tooltip-content">
                    {{'TOOLTIP.NUMBER_REQUIRED' | translate}}
                </span>
            </label>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.TOKEN_EXPIRATION' | translate}}</span>
            </a>
        </div>
        <div class="form-group" *ngIf="canDownloadCert">
            <label for="certDownloadLink" class="required">{{'CONFIG.ROOT_CERT' | translate}}</label>
            <a #certDownloadLink [href]="downloadLink" target="_blank">{{'CONFIG.ROOT_CERT_LINK' | translate}}</a>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.ROOT_CERT_DOWNLOAD' | translate}}</span>
            </a>
        </div>
        <div *ngIf="!withAdmiral" class="form-group">
            <label for="repoReadOnly">{{'CONFIG.REPO_READ_ONLY' | translate}}</label>
            <clr-checkbox-wrapper>
                <input type="checkbox" clrCheckbox name="repoReadOnly" id="repoReadOnly" [ngModel]="systemSettings.read_only.value"
                    (ngModelChange)="setRepoReadOnlyValue($event)" />
                <label>
                    <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right read-tooltip">
                        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                        <span class="tooltip-content">{{'CONFIG.TOOLTIP.REPO_TOOLTIP' | translate}}</span>
                    </a>
                </label>
            </clr-checkbox-wrapper>
        </div>
    </section>
</form>
<div>
    <button type="button" id="config_system_save" class="btn btn-primary" (click)="save()" [disabled]="!isValid() || !hasChanges()">{{'BUTTON.SAVE'
        | translate}}</button>
    <button type="button" class="btn btn-outline" (click)="cancel()" [disabled]="!isValid() || !hasChanges()">{{'BUTTON.CANCEL'
        | translate}}</button>
</div>
<confirmation-dialog #cfgConfirmationDialog (confirmAction)="confirmCancel($event)"></confirmation-dialog>